<template>
<div class="page-container">
    <Header title="我的"></Header>
    <div class="content-wrapper">
        <div class="content">
            <!-- 头像 -->
            <div class="user_info">
                <div class="info cursor-pointer" @click="handleAvatarClick">
                    <img :src="avatarUrl" alt="用户头像" class="avatar" />
                    <div class="user_desc">
                        <span>昵称:李罗伟</span>
                        <span>个性签名：我是一个前端工程师</span>
                    </div>
                </div>
            </div>
            <!-- 列表部分 -->
            <ul class="user_list">
                <li class="van-hairline--bottom" @click="togo('/order')">
                    <span>我的订单</span>
                    <van-icon name="arrow" />
                </li>
                <li class="van-hairline--bottom" @click="togo('/address')">
                    <span>地址管理</span>
                    <van-icon name="arrow" />
                </li>
                <li class="van-hairline--bottom" @click="togo('/userInfoEdit')">
                    <span>账号管理</span>
                    <van-icon name="arrow" />
                </li>
            </ul>
        </div>
    </div>
    <Footer></Footer>

    <!-- 头像修改弹窗：使用 Vant 标准的 Dialog 组件用法，补充必要的插槽和样式关联 -->
    <van-dialog v-model:show="showAvatarDialog" title="修改头像" confirm-button-text="确认" cancel-button-text="取消"
        @confirm="saveAvatar">
        <!-- 内容区域：放文件选择和预览 -->
        <template #default>
            <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*" class="file-input" />
            <div v-if="previewUrl" class="preview-container">
                <img :src="previewUrl" alt="预览头像" class="preview-image" />
            </div>
        </template>
    </van-dialog>
</div>
</template>

<script setup>
import Footer from '../../components/Footer.vue';
import Header from '../../components/Header.vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Dialog, Icon } from 'vant';
import 'vant/es/dialog/style';
import 'vant/es/icon/style';

Dialog.install = (app) => {
    app.use(Dialog);
};
Icon.install = (app) => {
    app.use(Icon);
};

let router = useRouter();
const fileInput = ref(null);
const showAvatarDialog = ref(false);
const avatarUrl = ref('');
const previewUrl = ref('');
const selectedFile = ref(null);

// 初始化时从localStorage加载头像
onMounted(() => {
    const savedAvatar = localStorage.getItem('userAvatar');
    if (savedAvatar) {
        avatarUrl.value = savedAvatar;
    } else {
        avatarUrl.value = '@/assets/user.jpg';
    }
});

const togo = (path) => {
    router.push(path);
};

// 处理头像点击事件
const handleAvatarClick = (event) => {
    console.log('头像被点击了');
    showAvatarDialog.value = true;

    // 添加点击反馈效果
    const target = event.currentTarget;
    target.classList.add('scale-95');
    setTimeout(() => {
        target.classList.remove('scale-95');
    }, 200);
};

// 处理文件选择：读取本地文件并生成预览
const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
        selectedFile.value = file;
        const reader = new FileReader();
        reader.onload = (event) => {
            previewUrl.value = event.target.result;
        };
        reader.readAsDataURL(file);
    }
};

// 保存头像到localStorage
const saveAvatar = () => {
    if (!previewUrl.value) {
        console.log('请选择图片后再确认');
        return;
    }

    // 保存到localStorage
    localStorage.setItem('userAvatar', previewUrl.value);

    // 更新显示
    avatarUrl.value = previewUrl.value;
    showAvatarDialog.value = false;
    console.log('头像更新成功');
};
</script>

<style scoped lang="less">
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

Header {
    height: 60px;
}

.content-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.content {
    width: 100%;
    padding-bottom: 20px;

    .user_info {
        width: 95%;
        margin: 10px;
        height: 115px;
        background: linear-gradient(90deg, #ffc400, #c7c351);
        box-shadow: 0 2px 5px #ffc400;
        border-radius: 6px;
        cursor: pointer;

        .info {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            padding: 25px 20px;
            box-sizing: border-box;
            transition: transform 0.2s;

            .avatar {
                border-radius: 50%;
                margin-top: 4px;
                width: 60px;
                height: 60px;
                object-fit: cover;
            }

            .user_desc {
                display: flex;
                flex-direction: column;
                margin-left: 10px;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
                justify-content: center;
            }

            &.scale-95 {
                transform: scale(0.95);
            }
        }
    }

    .user_list {
        padding: 0 20px;
        margin-top: 20px;
        background-color: #fff;

        li {
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }
    }
}

Footer {
    height: 50px;
}

.file-input {
    margin-bottom: 15px;
    display: block;
}

.preview-container {
    text-align: center;
    margin-top: 15px;
}

.preview-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 5px;
}

.cursor-pointer {
    cursor: pointer;
}
</style>